<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressDeliveryManagementLang.Waybill_Generate')"
      :visible.sync="Visible"
      width="100%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressDeliveryManagementLang.Waybill_info')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.Ticket_number')}}:
              </div>
              <div class="contant">
                <el-input
                  ref="ticket_num"
                  @blur="handleBlur('ticket_num',$event)"
                  @focus="handleFocus($event)"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.ticket_num"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.Waybill_date')}}:
              </div>
              <div class="contant">
                <el-date-picker
                  ref="waybill_date"
                  @blur="Blur('waybill_date')"
                  @focus="Focus('waybill_date')"
                  v-model="data.waybill_date"
                  value-format="timestamp"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.IsBrand')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="is_brand"
                  filterable
                  @blur="handleBlur('is_brand', $event)"
                  @change="handleChang('is_brand')"
                  v-model="data.is_brand"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_IsBrand"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.payment_method')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="pay_type"
                  filterable
                  allow-create
                  @blur="handleBlur('pay_type', $event)"
                  @change="handleChang('pay_type')"
                  v-model="data.pay_type"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_payment_method"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.currency')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="currency_type"
                  filterable
                  allow-create
                  @blur="handleBlur('currency_type', $event)"
                  @change="handleChang('currency_type')"
                  v-model="data.currency_type"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_currency"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Package_information')}}</div>
          <div style="margin:5px 0;">
            <span>{{$t('ExpressOrderManagementLang.Number_packages')}}：</span>
            <el-input-number
              style="width:100px"
              controls-position="right"
              size="small" 
              :min="0"  
              v-model="premium_num">
            </el-input-number>
            <img  @click="setPremium" style="width:24px;marginLeft: 5px;cursor: pointer;" src="../../../assets/img/true_btn.png" alt="">
          </div>
          <div style="display:flex; margin-bottom: 5px;gap:10px">
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="addItem('packages')">
              <img style="width:12px;height:12px;" src="../../../assets/img/add.png" alt="">
              <span>{{$t('common.Add')}}</span>
            </div>
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="delItem('packages')">
              <img style="width:12px;height:12px;" src="../../../assets/img/del.png" alt="">
              <span>{{$t('common.del')}}</span>
            </div>
          </div>
          <MyTable
            :tableColumn="tableColumn_packages"
            :tableData="tableData_packages"
            :isOrder="false"
            @sendCurrentData="setCurrent_packages"
            @sendTabClick="setTabClick"
          >
            <template v-slot:content="scope">
              
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-input-number v-fo v-noFocu v-if="scope.config.templateType=='InputNumber'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="scope.config.precision" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                <el-input
                  v-fo 
                  v-else-if="scope.config.templateType=='Input'"
                  @blur="inputBlur(scope.row,scope.config.prop)"
                  v-model="scope.row[scope.config.prop]"
                ></el-input>
                <el-select v-fo-select v-else-if="scope.config.templateType=='Select'" @visible-change="inputType" v-model="scope.row[scope.config.prop]" placeholder="请选择...">
                    <el-option
                      v-for="item in options_packing"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      order_sn:'',
      lid:'',
      data:{
        ticket_num:'',
        waybill_date:'',
        is_brand:'',
        pay_type:'',
        currency_type:'',
      },
      options_IsBrand:[],
      options_payment_method:[],
      options_currency:[],
      options_packing:[],
      tableColumn_packages: [
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.Number_packages'),
          prop: "package_num",
          width: 80,
          templateType:'InputNumber',
          precision:0
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.package_Number'),
          prop: "package_number",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.weight'),
          prop: "weight",
          width: 120,
          templateType:'InputNumber',
          precision:4
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.long'),
          prop: "length",
          width: 120,
          templateType:'InputNumber',
          precision:2
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.wide'),
          prop: "width",
          width: 120,
          templateType:'InputNumber',
          precision:2
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.high'),
          prop: "height",
          width: 120,
          templateType:'InputNumber',
          precision:2
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.volume'),
          prop: "volume",
          width: 120,
          templateType:'InputNumber',
          precision:5
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.density'),
          prop: "density",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.goods_name'),
          prop: "goods_name",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.quantity_num'),
          prop: "quantity_num",
          width: 120,
          templateType:'InputNumber',
          precision:0
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.model_num'),
          prop: "style_num",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.packing_method'),
          prop: "packing_method_name",
          width: 120,
          templateType:'Select',
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.remarks'),
          prop: "remark",
          width: 120,
          templateType:'Input',
        },
      ],
      tableData_packages: [],
      sendDataObj_packages:{},
      premium_num:0,
      tabClickIndex:null,
      tabClickLabel:null,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
    tableData_packages: {
      handler (val) {
        this.tableData_packages.forEach(item=>{
          if(!item.package_num||!item.weight||!item.volume||!item.goods_name){
            this.noCompletePackages=true
          }else{
            this.noCompletePackages=false
          }
          if(item.volume>0&&item.weight>0){
            item.density=this.$computing(Number(item.weight)/Number(item.volume),'fixed',2)
          }else{
            item.density=0
          }

          let arr=this.options_packing.filter(el=>{return el.name==item.packing_method_name})
          if(arr.length>0){
            item.packing_method=arr[0].id
          }
        })
      },
      deep: true
    },
  },
  methods: {
   
    init(data) {
      this.order_sn=data.order_sn
      this.lid=data.lid
      this.getOptions()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineSysItems").then((res) => {
        this.options_IsBrand = res.data.is_brand;
        this.options_payment_method=res.data.pay_type
      });
      this.$get("orderSysItems").then((res) => {
        this.options_currency = res.data.currency_type;
        this.options_packing = res.data.pack_method;
        this.data.currency_type=this.options_currency[0].id
      });
    },
    addItem(name){
      if(name=='packages'){
        let obj={
          package_num:0,
          package_number:this.tableData_packages.length+1,
          style_num:'',
          weight:0.00,
          length:0.00,
          width:0.00,
          height:0.00,
          volume:0.00,
          density:0.00,
          goods_name:'',
          quantity_num:0,
          packing_method_name:"",
          packing_method:"",
          remark:"",
        }
        this.tableData_packages.push(obj)
        this.tableData_packages.forEach((item,k)=>{
          item.table_code=k+1
        })
        this.premium_num=this.tableData_packages.length
      }
    },
    delItem(name){
      if(name=='packages'){
        this.tableData_packages=this.tableData_packages.filter(item=>{return item.id!=this.sendDataObj_packages.id})
        this.tableData_packages.forEach((item,k)=>{
          item.table_code=k+1
        })
        this.premium_num=this.tableData_packages.length
      }
    },
    setPremium(){
      let num=this.premium_num-this.tableData_packages.length
      if(num>0){
        for(var i=0;i<num;i++){
          this.addItem('packages')
        }
      }
      if(num<0){
        this.tableData_packages.splice(this.premium_num)
      }
    },
    // 提交修改
    confirm() {
      let type=true
      if(!this.data.ticket_num){
        this.$refs.ticket_num.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.waybill_date){
        this.$refs.waybill_date.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.is_brand&&this.data.is_brand!==0) {
        this.$refs.is_brand.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if (!this.data.pay_type&&this.data.pay_type!==0) {
        this.$refs.pay_type.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if (!this.data.currency_type&&this.data.currency_type!==0) {
        this.$refs.currency_type.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(this.tableData_packages.length==0){
        this.$message.warning(this.$t('ExpressOrderManagementLang.message1'));
        type=false
      }else{
        if(this.noCompletePackages){
          this.$message.warning(this.$t('ExpressOrderManagementLang.message2'));
          type=false
        }
      }
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        params.append("order_sn", this.order_sn);
        params.append("lid", this.lid);
        params.append("ticket_num", this.data.ticket_num);
        params.append("waybill_date",  new Date(this.data.waybill_date).getTime()/1000);
        params.append("is_brand", this.data.is_brand);
        params.append("pay_type", this.data.pay_type);
        params.append("currency_type", this.data.currency_type);
        params.append("packages", JSON.stringify(this.tableData_packages));

        this.$postForm("shipOrderPack", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    setCurrent_packages (data){
      this.sendDataObj_packages=data
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      if(prop=='length'||prop=='width'||prop=='height'){
        if(row.length>0&&row.width>0&&row.height>0){
            row.volume=this.$computing((Number(row.length)*Number(row.width)*Number(row.height))/1000000,'fixed',5)
        }else{
            row.volume=0
        }
        if(row.volume<0.00001){
          row.volume=0.00001
        }
      }
      this.tabClickIndex = null
      this.tabClickLabel = null   
    },
    // 下拉框选择初始化
    inputType(type) {
      if(!type&&!this.keydownType){
        this.tabClickIndex = null
        this.tabClickLabel = null    
      }
    },
    //取消修改
    cancel() {
      this.data={
        ticket_num:'',
        waybill_date:'',
        is_brand:'',
        pay_type:'',
        currency_type:'',
      }
      this.premium_num=0
      this.options_IsBrand=[],
      this.options_payment_method=[],
      this.options_currency=[]
      this.tableData_packages=[]
      this.tabClickIndex = null
      this.tabClickLabel = null   
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    // 判断了时间组件内容是否有东西
    Focus(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      dom.style.border = "1px solid #E0E3E9";
      
    },
    Blur(name) {
      let dom = this.$refs[name].$el.childNodes[1]
      if (!this.data[name]) {
        dom.style.border = "1px solid red";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 19%;
  }
</style>